<template>
	<div class="trade-rank-wrap">
		<div class="trade-rank-bg"/>
		<div class="panel-title">
			<h3><van-icon name="chart-trending-o" class="txt-primary"/> 实时交易动态</h3>
			<div class="clock">{{clock.date}} {{clock.time}}</div>
		</div>
		<div class="panel-main trade-rank">
<!--			<ul class="rank-head">-->
<!--				<li class="col1">省市</li>-->
<!--				<li class="col2">渠道门店</li>-->
<!--				<li class="col3">品牌</li>-->
<!--				<li class="col4">机型</li>-->
<!--				<li class="col5">数量</li>-->
<!--			</ul>-->
			<div class="rank-main">
				<div class="rank-empty" v-if="isLoading"><van-loading type="spinner" color="var(--van-primary-color)" size="30"/></div>
				<div class="rank-empty" v-else-if="!dataList||dataList.length===0">暂无实时交易</div>
				<swiper id="swiperList2" v-else :slides-per-view="3" class="rank-list"
						:autoplay="{ delay: 3000, disableOnInteraction: false }" :speed="500" :space-between="0" :direction="'vertical'"
						:scrollbar="{ draggable: false }" :loop="true" :modules="[Autoplay]" style="height:87px">
					<swiper-slide v-for="(item, index) in dataList" :key="index">
					<li>
						<div class="col1 van-ellipsis">{{item.provinceName}}{{item.cityName}}</div>
						<div class="col2 van-ellipsis">{{item.chnlName}}</div>
						<!--							<div class="col3">{{item.brandName}}</div>-->
						<div class="col3 van-ellipsis"><router-link :to="{path:'/goods/detail',query:{gdsId:item.gdsId}}">{{item.modelName}}</router-link></div>
						<div class="col4 van-ellipsis"><span style="transform: scale(0.8)">x</span>{{item.amount}}</div>
					</li>
					</swiper-slide>
				</swiper>
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.trade-rank-wrap{
	position:relative;
	margin:10px;border-radius: 8px; overflow:hidden;padding:10px; background-color:var(--white-color);
	.trade-rank-bg{
		position:absolute;top:0;left:0;width:100%;height:100%;
		background: linear-gradient( var(--van-primary-color) 0%,var(--white-color) 40% ); opacity: .15;
	}
	.panel-title{padding-top:6px;line-height:1;}
}
.clock{margin-left: auto; color:var(--font-third-color); font-size: 12px;}
.trade-rank{
	.col1{width:22%;text-align: left;}
	.col2{width:35%;text-align: center;}
	.col3{width:35%;text-align: right;}
	.col4{width:8%;text-align: right;}
}
//.rank-head{
//	margin:0;padding:0;background-color: var(--body-bg-color); font-size: 14px; color:var(--font-second-color);
//	display:flex; align-items: center;height:30px; font-weight: 600;
//	li{display:block;margin:0;padding:0;}
//}
.rank-main{
	height:90px; overflow:hidden;
}
.rank-empty{
	height:90px;
	display: flex; align-items: center; justify-content: center;
	color:var(--font-placeholder-color);
}
.rank-list{
	display:block;margin:0;padding:0;overflow:hidden;
	li{
		height:29px;display:flex; align-items: center; font-size: 12px;
		border-bottom: 1px dashed var(--border-lighter-color);
		color:var(--font-second-color); background-color:var(--white-color);
	}
}
</style>
<script lang="ts" setup>
//实时滚动交易动态
//props
const props=defineProps({
	shopId:{
		type:String,
		required:true,
	},
})

import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper';
import 'swiper/css';
//时钟
const {clock} = useClock()

//data
const isLoading=ref(false) //控制是否显示载入中，默认时应为true
const dataList=ref(<Array<any>>[])  //todo:异步载入
dataList.value=[
	{ subId:'111',provinceName:'浙江',cityName:'杭州', chnlName:'建始城区EE套票...专营店',brandName:'苹果（APPLE）',modelName:'iPhone 14 Pro Max',amount:13,gdsId:'1'},
	{ subId:'222',provinceName:'湖北',cityName:'武汉', chnlName:'建始城区AA套票...专营店',brandName:'华为（Huawei）',modelName:'Mate50 Pro',amount:23,gdsId:'2'},
	{ subId:'333',provinceName:'广东',cityName:'深圳', chnlName:'建始城区BB套票...专营店',brandName:'OPPO',modelName:'OPPO Reno12 Pro',amount:33,gdsId:'3'},
	{ subId:'444',provinceName:'四川',cityName:'成都', chnlName:'建始城区CC套票...专营店',brandName:'VIVO',modelName:'S16 Pro',amount:43,gdsId:'4'},
	{ subId:'555',provinceName:'安徽',cityName:'合肥', chnlName:'建始城区DD套票...专营店',brandName:'小米',modelName:'xiaomi 14 Ulrta',amount:3,gdsId:'5'},
	{ subId:'555',provinceName:'黑龙江',cityName:'哈尔滨', chnlName:'建始城区DD套票...专营店',brandName:'小米',modelName:'xiaomi 14 Ulrta',amount:3,gdsId:'6'},
]
</script>